<template>
    <div>
        <el-card class="box-card">
            <!-- 头部区域 -->
            <template #header>
                <div class="header">
                    <span>修改密码</span>
                </div>
            </template>
            <!-- 表单 -->
            <el-form :model="editpwdUser" status-icon :rules="rules" label-width="100px" ref="editfrom">
                <el-form-item label="旧密码" prop="oldpassword">
                    <el-input type="text" v-model="editpwdUser.oldpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                    <el-input type="password" v-model="editpwdUser.newpassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="renewpassword">
                    <el-input type="password" v-model="editpwdUser.renewpassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">提交</el-button>
                    <el-button @click="resetsubmit">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    data() {
        return {
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            editpwdUser: {
                userid: '',
                oldpassword: '',
                newpassword: '',
                renewpassword: ''
            },

            //规则
            rules: {
                oldpassword: [
                    { validator: this.validateoldPass, trigger: 'blur' }
                ],
                newpassword: [
                    { validator: this.validatenewPass, trigger: 'blur' }
                ],
                renewpassword: [
                    { validator: this.validaterenewPass, trigger: 'blur' }
                ]
            }

        };

    },
    methods: {
        //旧密码校验
        validateoldPass(rule, value, callback) {
            if (value == '') {
                callback(new Error('请输入旧密码'));
            } else {
                if (value.length < 5 || value.length > 15) {
                    callback(new Error('旧密码长度应为5~15个字符'));
                } else {
                    // 如果验证通过，也需要调用callback，表示验证完成且无错误
                    callback();
                }
            }
        },


        //新密码校验
        validatenewPass(rule, value, callback) {
            if (value == '') {
                callback(new Error('请再次输入密码'));
            } else {
                if (value.length < 5 || value.length > 15) {
                    callback(new Error('新密码长度应为5~15个字符'));
                } else {
                    // 如果验证通过，也需要调用callback，表示验证完成且无错误
                    callback();
                }
            }
        },

        //再次输入新密码校验
        validaterenewPass(rule, value, callback) {
            if (value == '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.editpwdUser.newpassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback()
            }
        },

        onsubmit() {
            request.put("/user/editPwd",this.editpwdUser).then(res=>{
                console.log(res.data)
                if(res.data.code == '0'){
                    this.$message.success("修改密码成功")
                }else{
                    this.$message.error(res.data.message)
                }
            }).catch(error => {
                console.error("修改密码时发生错误:", error);
                this.$message({
                    message: '修改密码时发生错误，请重试',
                    type: 'error'
                });
            });
        },
        resetsubmit() {
         this.editpwdUser.userid='',
         this.editpwdUser.newpassword='',
         this.editpwdUser.oldpassword='',
         this.editpwdUser.renewpassword=''
        

        }
    },
    created() {
        //用户id初始化携带
        this.editpwdUser.userid=this.user.data.userid
    }
};
</script>

<style scoped>
.header {
    margin-bottom: 20px;

}

.el-input {
    width: 60%;
}
</style>